//权限分配

import React, { useEffect, useState } from 'react';
import { Layout, Form, Input, Button, Table, Space, Modal,Radio,Popconfirm, message} from 'antd';
import { render } from '@testing-library/react';
import { identity } from 'lodash';
import { searchUserTypeAPI,updateUserTypeAPI} from '@/api/admin';

const { Search } = Input;
const { Header, Content, Footer } = Layout;

const PermissionAllocation = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);


const [value1, setValue1] = useState('Apple');
const plainOptions = ['Apple', 'Pear', 'Orange'];
const [userId,setUserId]=useState('')

const onChange1 = ({ value }) => {
    console.log('radio1 checked', value);
    setValue1(value);
  };

  const [value, setValue] = useState(0);
  //获取身份信息
  const onChangeAuthority = async (userId, value) => {
    // 更新对应用户的权限状态
    setDataSource(prevDataSource =>
      prevDataSource.map(item => 
        item.userId === userId ? { ...item, identity: value } : item
      )
    );
    console.log("权限更新了",value,userId)
   await updateUserTypeAPI(userId,value)
   message.success('更新成功！')
  };
  const [dataSource, setDataSource]  = useState([])
  // ([
  //   {
  //     userId: '1',
  //     name: '胡彦斌',
  //     identity:'coach',
  //     identity: 0
  //     // render:(value)=>{
  //     //   <Radio.Group onChange={onChangeAuthority} value={value}>
  //     //   <Radio value={1}>A</Radio>
  //     //   <Radio value={2}>B</Radio>
  //     //   <Radio value={3}>C</Radio>
  //     //   <Radio value={4}>D</Radio>
  //     //   </Radio.Group>
  //     //   }
  //   },
  //   {
  //     userId: '2',
  //     name: '李四',
  //     identity:'coach',
  //     identity: 0
  //     // render:(value)=>{
  //     //   <Radio.Group onChange={onChangeAuthority} value={value}>
  //     //   <Radio value={1}>A</Radio>
  //     //   <Radio value={2}>B</Radio>
  //     //   <Radio value={3}>C</Radio>
  //     //   <Radio value={4}>D</Radio>
  //     //   </Radio.Group>
  //     //   }
  //     }
  // ])
  const columns = [
    {
      title: '用户ID',
      dataIndex: 'userId',
      key: 'userId',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '更改权限',
      key: 'changeAuthority',
      render: (text, record) => (
        <Radio.Group 
          onChange={(e) => onChangeAuthority(record.userId, e.target.value)} 
          value={record.identity}
        >
          <Radio value={0}>管理员</Radio>
          <Radio value={1}>教练员</Radio>
        </Radio.Group>
      ),
      }
      
        
    //   render: (text, record) => (
    //     <Space size="middle">
    //       <Button onClick={() => handleEdit(record)}>编辑</Button>
    //       <Button onClick={() => handleDelete(record.key)}>删除</Button>
    //     </Space>
    //   ),
  ];

  const handleEdit = (record) => {
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleDelete = (key) => {
    setData(data.filter(item => item.key !== key));
  };

  const handleSave = () => {
    form.validateFields()
      .then(values => {
        const newData = [...data];
        const index = newData.findIndex(item => item.key === values.key);
        if (index > -1) {
          newData[index] = values;
        } else {
          newData.push(values);
        }
        setData(newData);
        form.resetFields();
        setModalVisible(false);
      })
      .catch(error => console.error(error));
  };

  const handleAddNew = () => {
    const key = Math.random().toString(36).substr(2, 9); // 生成随机key
    const newItem = { key, id: '', name: '', time: '' }; // 创建新数据项
    setData([...data, newItem]); // 添加到数据列表
    form.setFieldsValue(newItem); // 设置表单初始值
    setModalVisible(true); // 打开模态框
  };

  const onSearch = async(value, _e, info) =>{
    console.log(value)
    const res= await searchUserTypeAPI(value)
    console.log("身份：",identity)
    setDataSource(res.data)
    message.success('查询成功！')
  }
  return (
    <Layout>
      <Header style={{ color: 'white' }}>权限分配</Header>
      <Content style={{ padding: '10 50px' }}>
        <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>

        {/* <Button onClick={handleAddNew} style={{ marginBottom: 16 }}>
            新增
          </Button> */}
           <Search
      placeholder="请输入ID"
      onSearch={onSearch}
      style={{
        width: 200,
      }}
    />

          <Table columns={columns} dataSource={dataSource} />
        </div>
      </Content>
      <Footer>
     <div style={{position:'absolute',left:'50%'}}>驾校管理系统&copy;2024-2099</div>
   </Footer>
    </Layout>
  );
};

export default PermissionAllocation;